<template>
  <div class="el-table-block2">
    <!--<el-table
      :data="[{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }]"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>-->
    <el-table-block
      :key="JSON.stringify(column2)"
      ref="ElTableBlock"
      v-bind="$attrs"
      :column="column2"
      :border="border"
      v-on="$listeners"
    />
  </div>
</template>

<script>
export default {
  name: 'ElTableBlock2',
  props: {
    border: {
      type: Boolean,
      default: false
    },
    column: {
      type: Array,
      default() {
        return []
      }
    }
  },
  computed: {
    column2() {
      return this.column.map(col => {
        col.showOverflowTooltip = true
        return col
      })
    }
  },
  data() {
    const methods = [
      'exportTableFile',
      'clearSelection',
      'toggleRowSelection',
      'toggleAllSelection',
      'toggleRowExpansion',
      'setCurrentRow',
      'clearSort',
      'clearFilter',
      'doLayout',
      'sort',
      'paginationCurrentChange',
      'getMergeArr',
      'mergeMethod'
    ]
    methods.forEach(name => {
      this[name] = function() {
        return this.$refs.ElTableBlock[name](arguments)
      }
    })
    return {}
  }
}
</script>

<style lang="scss" scoped>
.el-table-block2 {
  &.is-border {
    border: 1px solid #001831;
    border-bottom: none;
  }

  ::v-deep .el-table {
    color: #a5e0ff;

    thead th,
    thead tr {
      background: #003c69;
      color: #a5e0ff;
    }

    tr {
      color: #ffffff;

      &.el-table__row:nth-child(even) {
        background-color: rgba(1, 96, 157, 0.25);
      }
    }

    th.el-table__cell {
      background-color: #003c69;
    }

    td.el-table__cell {
      padding: 9px;
    }

    &.el-table--border {
      th,
      td {
        border-right: 1px solid #001d43;
      }
    }
  }
}
</style>
